<template>
  <div v-loading="loading">
    <tableComponents
      :pagination="{currentPage,pageSize,total:materialList.all_num}"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      @toAdd="openDio"
    >
      <template v-slot:table>
        <el-table
          element-loading-text="拼命加载中"
          ref="multipleTable"
          :data="materialList.data"
          stripe
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="35"></el-table-column>

          <el-table-column label="图片" min-width="80">
            <template slot-scope="scope">
              <img class="sucai" :src="$fnc.getImgUrl(scope.row.piclink)" alt />
            </template>
          </el-table-column>

          <el-table-column label="标题" min-width="260">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>

          <el-table-column label="链接" min-width="225">
            <template slot-scope="scope">{{ scope.row.links }}</template>
          </el-table-column>

          <el-table-column label="添加时间" min-width="150">
            <template slot-scope="scope">{{ scope.row.update_time | getTimeFormat }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="primary"
                @click="updateItem(scope.$index,scope.row)"
              >编辑</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                type="danger"
                @click="deleteItems( scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" @click="deleteLises">删除</a>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="素材管理"
      v-loading="dioLoading"
      class="tl size_13"
      width="800px"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" :rules="formYZ" ref="form" label-width="120px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-col :span="12">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="图片" prop="piclink">
          <el-col :span="12">
            <el-input v-model="form.piclink" autocomplete="off" class="mar_bottom_5"></el-input>

            <compressimgUpload
              :onSuccess="onSuccess"
              :pic="form.piclink"
              :isOneImg="true"
              :files="fileList"
            ></compressimgUpload>
          </el-col>
        </el-form-item>
        <el-form-item label="链接" prop="links">
          <el-col :span="12">
            <el-input :disabled="bool" v-model="form.links" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="5" :offset="1">
            <LinkMenu @sendRow="getSendRow"></LinkMenu>
          </el-col>
        </el-form-item>
        <el-form-item label="内容描述" prop="content">
          <el-col :span="12">
            <el-input type="textarea" :rows="6" v-model="form.content" autocomplete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="submitForm('form')"
          >确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import compressimgUpload from "@/components/currency/compressimgUpload.vue";
import LinkMenu from "@/components/currency/Link_menu.vue";
import { materialSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  components: {
    compressimgUpload,
    LinkMenu
  },
  data() {
    return {
      userSearchData: materialSearchData,
      url_header: "",
      materialList: "",
      pageSize: 10,
      currentPage: 1,
      dialogFormVisible: false,
      dioLoading: false,
      uddateIndex: "",
      multipleSelection: [],
      form: {
        title: "",
        piclink: "",
        links: "",
        content: ""
      },
      formLabelWidth: "100px",
      fileList2: [],
      fileList: [],
      formYZ: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        piclink: [{ required: true, message: "图片不能为空", trigger: "blur" }],
        links: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }]
      },
      updateId: "",
      loading: false,
      showImg: true,
      searchAll: {},
      prevList: null,
      bool: true
    };
  },
  methods: {
    getSendRow(row) {
      if (row == null) return false;

      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      if (row == null) return false;
      let index = row.index;
      if (!row.disable && row.title == "自定义链接") {
        this.form.links = "";
        this.bool = false;
        return false;
      } else {
        this.bool = true;
      }

      if (row.url) {
        this.form.links = this.url_header + row.url;
      }

      if (row.url_title == "产品分类" && row.click_title == "供应商分类") {
        this.form.links = this.url_header + "/pages/shop/supplier/supplier?cate=" + row.id;
        return;
      }
      if (row.url_title == "产品分类" && row.click_title != "供应商分类") {
        this.form.links =
          this.url_header + "/shop/shopsearch?cate_id=" + row.id;
      }
      if (row.url_title == "旅游产品分类") {
        this.form.links = this.url_header + "/tourshop/cate?cate_id=" + row.id;
      }
      if (row.url_title == "插件管理") {
        this.form.links = row.url || "";
      }

      if (row.url_title == "商品选择") {
        this.form.links = this.url_header + "/pages/shop/shopdetail/shopdetail?id=" + row.id;
      }
      if (row.url_title == "文章添加") {
        this.form.links =
          this.url_header + "/pages/news/newsdetail/newsdetail?id=" + row.id;
      }
      if (row.url_title == "资讯分类") {
        this.form.links = this.url_header + "/news?cate_id=" + row.id;
      }
    },
    openDio() {
      this.dialogFormVisible = true;
      this.showImg = false;
      this.form = {
        title: "",
        piclink: "",
        links: "",
        content: ""
      };
    },
    getSearch(obj) {
      this.loading = true;
      this.searchAll = obj;
      var _this = this;
      this.$router.push(this.$route.path + "?page=" + 1);
      this.$store.dispatch("getWx_material", obj).then(function() {
        _this.loading = false;
      });
    },
    getMaterialList(title, page, page_size) {
      this.loading = true;
      this.$store.dispatch("getWx_material", { title, page, page_size });
      this.loading = false;
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;

      this.$store.dispatch("getWx_material", params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // var params=this.searchAll;
      //     params.page=val;
      //     params.page_size=this.pageSize;
      console.log(1);
      this.$router.push(this.$route.path + "?page=" + val);
      // this.$store.dispatch('getWx_material',params);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteItems(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getWechat.deleteMaterialItems(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getMaterialList();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    submitForm(formName) {
      var _this = this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
          _this.dioLoading = true;
          var params = _this.form;
          if (params.id) {
            _this.$api.getWechat.updateMaterialItems(params).then(res => {
              if (res.data.code == 200 && res.data.result != null) {
                _this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                //  _this.materialList[_this.uddateIndex]=_this.form;
                this.getMaterialList();
                _this.$refs[formName].resetFields();
                _this.dialogFormVisible = false;
              } else {
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
              this.dioLoading = false;
            });
          } else {
            this.$api.getWechat.addMaterialItems(params).then(res => {
              if (res.data.code == 200 && res.data.result != null) {
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                this.getMaterialList();
                this.dialogFormVisible = false;
              } else {
                _this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
              this.dioLoading = false;
            });
          }
        } else {
          return false;
        }
      });
    },
    onSuccess(pic) {
      this.form.piclink = pic;
      this.showImg = true;
    },
    deleteLises() {
      //批量删除
      var str = "";
      if (this.multipleSelection.length <= 0) {
        this.$message.error("未选择批量删除");
      } else {
        for (var i in this.multipleSelection) {
          str += this.multipleSelection[i].id + "@";
        }
        str = str.slice(0, -1);
        this.$swal({
          title: "您确定要删除这些信息吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "是的，我要删除",
          cancelButtonText: "容我三思"
        }).then(willDelete => {
          if (willDelete.value) {
            var data = { del_id: str };
            this.$api.getWechat.deleteMaterialAll(data).then(res => {
              if (res.data.code == 200) {
                this.$swal("删除成功！", "您已经删除了这些信息。", "success");
                this.getMaterialList();
              } else {
                this.$swal("删除失败！", "出错啦！", "success");
              }
            });
          }
        });
      }
    },
    updateItem(index, row) {
      this.uddateIndex = index;
      this.dialogFormVisible = true;
      this.form = row;
    }
  },
  mounted() {
    if (this.$store.state.wx_material == "") {
      this.getMaterialList();
      this.materialList = this.$store.state.wx_material;
    }
  },
  computed: {
    getMaterial() {
      return this.$store.state.wx_material;
    }
  },
  watch: {
    getMaterial(val) {
      this.materialList = val;
    },
    $route() {
      var params = this.searchAll;
      params.page = this.$route.query.page || 1;
      params.page_size = this.pageSize;
      this.$store.dispatch("getWx_material", params);
      this.currentPage = Number(this.$route.query.page) || 1;
    }
  },
  beforeCreate() {},
  created() {
    this.getMaterialList();
    this.$api.getSettings.getSettingsList({ cate: "wx" }).then(res => {
      if (res.data.code == 200 && res.data.status == 1) {
        res.data.result.forEach(item => {
          if (item.title == "手机端网址") {
            this.url_header = item.value;
            // this.formUrl.value = item.value;
          }
        });
      } else {
        this.$fnc.alertError(res.data.code_desc, res.data.result);
      }
    });
  }
};
</script>
